<template>
    <el-dialog title="率定信息" :visible.sync="dialogVisible" v-dialogDrag
    width="800px" :before-close="handleCancelPoint">
        <el-form ref="pointForm" :model="pointForm" label-width="230px">
            <el-form-item label="使用公式" v-if="formulaList.length > 0">
                <div class="formulaWrapper">
                    <div v-for="(item,index) in formulaList" :key="index" class="formula">{{ item }}</div>
                </div>
            </el-form-item>
            <el-form-item label="测点名称" v-if="!isMonitor">
                <el-select v-model="pointForm.pointName" @change="handleChangePointName" style="width:530px">
                    <el-option v-for="(item,index) in pointNameList" :key="index" :label="item.pointName" :value="item.pointName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="测点名称" v-if="isMonitor">
                <span v-if="pointNameList.length > 0"> {{ pointNameList[0].pointName }}</span>
            </el-form-item>
            <el-form-item 
                v-for="(item,index) in pointFormLabel" 
                :key="index" :label="item.value" 
                :prop="item.key"
                :rules="[{ required: true, message: '请输入' + item.value, trigger: 'blur' }]">
                <el-input v-model="pointForm[item.key]" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="时间">
            <el-date-picker
                v-model="pointForm.dt"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy/MM/dd" 
                style="width:530px"
                placeholder="选择日期">
            </el-date-picker>
            </el-form-item>
        </el-form>
        <div class="dialog-footer">
            <el-button @click="handleCancelPoint" size="small" icon="el-icon-circle-close" class="cancel-btn">取消</el-button>
            <el-button type="primary" @click="handleSavePoint" icon="el-icon-circle-check" size="small" class="confirm-btn">保存配置</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name:'calibrationAddDialog',
    props:{
        visible:{
            type:Boolean,
            default:false
        },
        pointForm:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        formulaList:{
            type:Array,
            default:()=>{
                return []
            }
        },
        pointFormLabel:{
            type:Array,
            default:()=>{
                return []
            }
        },
        pointNameList:{
            type:Array,
            default:()=>{
                return []
            }
        },
        isMonitor:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return{
            dialogVisible:this.visible,
        }
    },
    watch: {
        visible(newVal) {
            this.dialogVisible = newVal;
        },
        dialogVisible(newVal) {
            this.$emit('update:visible', newVal);
        },
    },
    methods:{
        handleChangePointName(val){
            const filterList =  this.pointNameList.filter(item => item.pointName == val)
            this.pointForm.pointName = val
            this.pointForm.CODE_ID = filterList[0].codE_ID
        },
        handleCancelPoint(){
            this.$refs.pointForm.clearValidate()
            this.dialogVisible = false
        },
        handleSavePoint(){
            this.$refs.pointForm.validate(valid => {
                if (valid) {
                    this.$emit('handleSavePoint',this.pointForm)
                } else {
                    return false;
                }
            });
        }
    }
}
</script>